const path = require('path');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  publicPath: '/vue3_coderwhy/', // 注意需要前后两个斜线  如果单单写一个路径会出现重复路径的问题
  transpileDependencies: true,

  lintOnSave: 'default',

  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components',
      },
      extensions: ['.ts', '.tsx'],
    },
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    devServer: {
      hot: true,
      proxy: {
        '^/coderwhy': {
          target: 'http://152.136.185.210:5000',
          changeOrigin: true,
          // 注意路径重写并不会在真实请求内体现出来
          pathRewrite: {
            '/coderwhy': '',
          },
        },
      },
    },
    // 开启分离 js
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 20000,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              let arr = module.context.match(
                /[\\/]node_modules[\\/](.*?)([\\/]|$)/,
              );
              // console.log('vue.config', arr);
              const packageName = arr?.length ? arr[1] : '';
              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`;
            },
          },
        },
      },
    },
  },

  // 提升90%加载速度——vuecli下的首屏性能优化
  // https://juejin.cn/post/6844903869642702862
  chainWebpack: (config) => {
    /* 添加分析工具*/
    if (process.env.NODE_ENV === 'production') {
      if (process.env.npm_config_report) {
        config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
          .end();
        config.plugins.delete('prefetch');
      }
      // 开启分离js
      // config.optimization = {
      //   runtimeChunk: 'single',
      //   splitChunks: {
      //     chunks: 'all',
      //     maxInitialRequests: Infinity,
      //     minSize: 20000,
      //     cacheGroups: {
      //       vendor: {
      //         test: /[\\/]node_modules[\\/]/,
      //         name(module) {
      //           // get the name. E.g. node_modules/packageName/not/this/part.js
      //           // or node_modules/packageName
      //           const packageName = module.context.match(
      //             /[\\/]node_modules[\\/](.*?)([\\/]|$)/,
      //           )[1];
      //           // npm package names are URL-safe, but some servers don't like @ symbols
      //           return `npm.${packageName.replace('@', '')}`;
      //         },
      //       },
      //     },
      //   },
      // };
    }
  },

  // configureWebpack: (config) => {
  //   config.resolve.alias = {
  //     '@': path.resolve(__dirname, './src'),
  //     components: '@/components'
  //   };
  // },

  // chainWebpack: (config) => {
  //   config.resolve.alias
  //     .set('@', path.resolve(__dirname, './src'))
  //     .set('components', '@/components');
  // },
});
